<template>
  <div class="setting-container">
    <div class="markdown-display">
      <div v-html="renderedMarkdown" class="markdown-content"></div>
    </div>
    <transition name="fade">
      <div v-if="editing" class="editor-container">
        <mavon-editor v-model="editMarkdown" :preview="false" :subfield="true"></mavon-editor>
        <button class="save-button" @click="saveChanges">Save</button>
      </div>
    </transition>
    <!-- <button class="toggle-button" @click="toggleEditing">
      {{ editing ? 'Cancel' : 'Edit' }}
    </button> -->
  </div>
</template>

<script>
import 'mavon-editor/dist/css/index.css';
import { mavonEditor } from 'mavon-editor';
import MarkdownIt from 'markdown-it';

export default {
  name: "Setting",
  components: {
    mavonEditor
  },
  data() {
    return {
      editing: false,
      editMarkdown: "",
      displayMarkdown: "### 环境设置指南\n" +
        "\n" +
        "#### 1.安装Python虚拟环境\n" +
        "\n" +
        "安装python 3.8虚拟环境\n" +
        "\n" +
        "```\n" +
        "conda create -n paddle python==3.8\n" +
        "```\n" +
        "\n" +
        "#### 2.安装Paddle\n" +
        "\n" +
        "可以使用nvidia-smi查看cuda版本，本系统cuda是12.0，我安装CUDA11.7 及其以下都可以\n" +
        "\n" +
        "##### 2.1 GPU版本安装\n" +
        "\n" +
        "```\n" +
        "conda install paddlepaddle-gpu==2.4.2 cudatoolkit=11.6 -c https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/Paddle/ -c conda-forge\n" +
        "```\n" +
        "\n" +
        "如果没有CUDA 以及 cudnn 请移步一下博客去安装\n" +
        "\n" +
        "[(1085条消息) win10+cuda11.4+cudnn8.4+TensorRT-8.4.1.5环境配置_起个名字都难啊的博客-CSDN博客](https://blog.csdn.net/weixin_42408280/article/details/125933323)\n" +
        "\n" +
        "如果仅做推理，可以集成 **TensorRT** 加快 GPU 推理速度，安装教程如上。\n" +
        "\n" +
        "Paddle Inference 采用子图的形式集成 TensorRT，针对 GPU 推理场景，TensorRT 可对一些子图进行优化，包括 OP 的横向和纵向融合，过滤冗余的 OP，并为 OP 自动选择最优的 kernel，加快推理速度。\n" +
        "\n" +
        "##### 2.2  CPU版本安装\n" +
        "\n" +
        "```\n" +
        "conda install paddlepaddle==2.4.2 --channel https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/Paddle/\n" +
        "```\n" +
        "\n" +
        "#### 3. 依赖安装\n" +
        "\n" +
        "pip install -r requirment.txt\n" +
        "\n" +
        "requirment.txt文件如下\n" +
        "\n" +
        "```\n" +
        "scikit-image\n" +
        "numpy\n" +
        "paddlepaddle-gpu>=2.2.0\n" +
        "SimpleITK>=2.1.1\n" +
        "PyYAML\n" +
        "pynrrd\n" +
        "tqdm\n" +
        "visualdl\n" +
        "sklearn\n" +
        "filelock\n" +
        "nibabel\n" +
        "pydicom\n" +
        "pyyaml\n" +
        "scikit-learn\n" +
        "medpy\n" +
        "```\n" +
        "\n" +
        "#### 4. 模型导出\n" +
        "\n" +
        "项目链接clone：https://github.com/PaddlePaddle/PaddleSeg.git\n" +
        "\n" +
        "模型权重文件下载：\n" +
        "\n" +
        "在项目根目录`PaddleSeg`下，执行，导出模型\n" +
        "\n" +
        "```\n" +
        "cd contrib\n" +
        "cd MedicalSeg\n" +
        "python nnunet/export.py --config 模型yml文件路径 --save_dir 导出结果存放路径 --model_path 模型pdparms文件存放路径\n" +
        "eg.python nnunet/export.py --config D:\\Astudy\\python\\feijiang\\iter_250000\\nnunet_fold0.yml --save_dir D:\\Astudy\\python\\feijiang\\iter_250000 --model_path D:\\Astudy\\python\\feijiang\\iter_250000\\model.pdparams\n" +
        "```\n" +
        "\n" +
        "#### 5. 模型推理指南\n" +
        "\n" +
        "在PaddleSeg根目录，执行以下命令进行预测，其中传入数据我们支持预处理之前的文件（支持使用固定参数 HU 值变换和 Resample），和预处理之后的 npy 文件:\n" +
        "\n" +
        "```\n" +
        "python nnunet/infer.py --image_folder 待推理文件夹路径  --output_folder 输出结果保存路径 --plan_path 数据预处理后pkl文件路径 --model_paths 模型导出的静态图的pdmodel文件路径 --param_paths 模型导出的静态图的pdiparams文件路径 --postprocessing_json_path 模型验证完毕后得到的postprocessing.json文件路径 --model_type 模型类型 --disable_postprocessing  --save_npz\n" +
        "```\n" +
        "\n" +
        "```\n" +
        "eg.\n" +
        "python nnunet/infer.py --image_folder testfile  --output_folder predict_result --plan_path data/preprocessed/nnUNetPlansv2.1_plans_3D.pkl --model_paths output/static/3d_unet/fold0/model.pdmodel --param_paths ~/code/PaddleSeg/contrib/MedicalSeg/output/static/3d_unet/fold0/model.pdiparams --postprocessing_json_path output/3dunet_val/fold_0/postprocessing.json --model_type 3d --disable_postprocessing  --save_npz \n" +
        "```\n" +
        "\n" +
        "参考文件：\n" +
        "\n" +
        "1.训练指南参考：\n" +
        "\n" +
        "1. https://aistudio.baidu.com/aistudio/projectdetail/4884907?contributionType=1\n" +
        "2. https://github.com/PaddlePaddle/PaddleSeg/blob/release/2.7/contrib/MedicalSeg/configs/nnunet/msd_lung/README.md\n" +
        "\n" +
        "2.medicalseg部署教程（nnunet除外）：https://github.com/PaddlePaddle/PaddleSeg/blob/release/2.8/contrib/MedicalSeg/README_CN.md\n" +
        "nnunet部署教程：https://github.com/PaddlePaddle/PaddleSeg/tree/release/2.8/contrib/MedicalSeg/configs/nnunet/msd_lung\n" +
        "\n"
    };
  },
  computed: {
    // 使用 markdown-it 渲染 Markdown 内容
    renderedMarkdown() {
      const md = new MarkdownIt();
      return md.render(this.displayMarkdown);
    }
  },
  methods: {
    toggleEditing() {
      this.editing = !this.editing;
      this.editMarkdown = this.displayMarkdown;
    },
    saveChanges() {
      this.displayMarkdown = this.editMarkdown;
      this.editing = false;
    }
  }
};
</script>

<style scoped>
.setting-container {
  padding:0 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.markdown-display {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e9f3ff;
  background-color: #fafdff;
}

.markdown-content {
  padding: 10px;
  line-height: 1.6;
}

.editor-container {
  margin-top: 20px;
}

.save-button {
  margin-top: 10px;
}
</style>
